<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="interlocutDetail  pd-30">
			<view class="card1 flex pd-20">
				<view class="img ">
					<image class="wh-100  bd-r40" :src="details?.product_info?.cover" mode="aspectFill"></image>
				</view>
				<view class="right ml-24">
					<view class="ft1 te-2">

						{{ details?.product_info?.name }}
					</view>
					<view class="btn flex-center mt-20">
						<text class="ft"
							@click="goPage('/subpackage/immigration/immigration?id=' + details.product_id)">查看商品</text>
						<image class="wh-24 ml-12" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
						</image>
					</view>
				</view>
			</view>
			<view class="card2 mt-20 pd-20">
				<view class="flex-bwt">
					<view class="flex wenItem">
						<view class="wen ft c-ff">问</view>
						<view class="ft1 ml-12 te-wid">
							<p class="te-1">

								{{ details?.name }}
							</p>
						</view>
					</view>
					<!-- <view class="more"  @click="isMore = !isMore">
		      <image class="mr-12" style="z-index: 1; width: 74rpx; height: 42rpx"
		        src="https://cdn.oss.bon-top.cn/static_bc/images/more.png"></image>
		    </view> -->
					<view class="positionBox">
						<image @click="isMore = !isMore" style="
		              z-index: 1;
		              width: 74rpx;
		              height: 42rpx;
		            " src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
						<view v-if="isMore" class="box pd-20">
							<view v-if="details.is_my === 0" class="ft c-33 flex-center"
								@click="goReport(details.id, 'question_id')">
								举报
							</view>
							<view v-else class="ft c-33 flex-center"
								@click="isDelete(details.id, 'deleteQuestion', '确定要删除该条提问吗？')">删除
							</view>
						</view>
					</view>
				</view>
				<view class="ml-48  mt-12 ft c-99">{{ details.ip_location + ' | ' + details.created_at }}</view>
				<view class="ml-48  mt-12 ft flex">
					<view class="da ft">答</view>
					<view class=" ml-8 ft c-66">{{ details.answer_num + '人回答了' }}</view>
				</view>
				<view class="ml-90 ft c-99 mt-8">{{ (details.sale_answer_num) + '条为认证老师回答' }}
				</view>
			</view>
			<!-- 列表 -->
			<view class="caseBox mb-250 mt-30 pd-20" v-if="datas && datas.length > 0">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll">
					<!-- <view class="ft c-99">{{ datas.length + "条回复" }}</view> -->
					<view class="ft c-99">{{ "回答列表" }}</view>
					<view class="caseCard" v-for="(item) in datas" :key="item.id">

						<view class="mt-24 flex-bwt1">
							<view class="identity flex">
								<view style="position: relative">
									<image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1"
										:src="item.user_info.avatar"></image>
									<image v-if="item.user_info.sale_info && item.user_info.sale_info.is_official === 1"
										class="wh-28 mr-12" style="
		                  border-radius: 50%;
		                  position: absolute;
		                  right: 0;
		                  bottom: 0;
		                  z-index: 3;
		                " src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
								</view>
								<view class="desc ml-20 te-wid">
									<view class="ft1 te-1">{{ item.user_info.nickname }}
										<text class="nameTitle" v-if="item.user_info?.sale_id > 0">认证老师</text>
									</view>
									<view class="ft mt-12 ft-20 c-99">{{
										item.ip_location + " | " + item.created_at
									}}</view>
									<view class="te-2 fw-400 ft-24 c-66"
										@click="openReply(item.user_info.nickname, item.id)">{{
											item.content }}</view>
								</view>
							</view>

							<view class="positionBox">
								<image @click="item.isMore = !item.isMore" style="
		              z-index: 1;
		              width: 74rpx;
		              height: 42rpx;
		             
		            " src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
								<view v-if="item.isMore" class="box pd-20">
									<view v-if="item.is_my === 0" class="ft c-33 flex-center"
										@click="goReport(item.id, 'answer_id')">举报
									</view>
									<view v-else class="ft c-33 flex-center"
										@click="isDelete(item.id, 'deleteAnswer', '确定要删除该条回答吗？')">删除
									</view>
								</view>
							</view>

						</view>
						<view class="ft mt-12 ml-102">{{
							item.name
						}}</view>

						<view class="combination flex-eve ft mt-12 ml-102">
							<!-- <view class="flex-center" @click="openInput(item.user_info.nickname, item.id)">
		          <image class="wh-24 mr-12" src="https://cdn.oss.bon-top.cn/static_bc/images/say.png"></image>
		          <text class="ft">{{ item.reply_list.length }}</text>
		        </view> -->
							<view class="flex-center" @click="openReply(item.user_info.nickname, item.id)">
								评论
								<image class="wh-24 mr-12 ml-4" @click="item.showChild = !item.showChild"
									src="https://cdn.oss.bon-top.cn/static_bc/images/say.png"></image>
								<text class="ft">{{ item.reply_list.length }}</text>
							</view>
							<text>|</text>
							<view class="flex-center" @click="handleZan(item.id, item.is_like, 'answer_id', item)">
								点赞
								<image v-if="item.is_like === 1" class="wh-24 mr-12 ml-4"
									src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
								<image v-if="item.is_like === 0" class="wh-24 mr-12 ml-4"
									src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
								<text class="ft">{{ item.like_num }}</text>
							</view>
						</view>
						<!-- 下级评论 -->
						<view class="nextCase" v-if="item.reply_list && item.reply_list.length > 0"
							:class="item.showChild ? 'maxHeight' : ''">
							<!-- 最多显示两条 更多跳转详情 -->
							<view class="mt-20" v-for="child in item.reply_list.slice(0, 2)" :key="child.id">
								<view class="flex-bwt1">
									<view class="identity flex">
										<view style="position: relative">
											<image class="wh-72 mr-12" style="border-radius: 50%; z-index: 1"
												:src="child.user_info.avatar">
											</image>
											<image class="wh-28 mr-12"
												v-if="child.user_info.sale_info && child.user_info.sale_info.is_official === 1"
												style="border-radius: 50%; position: absolute; right: 0; bottom: 0; z-index: 3;"
												src="https://cdn.oss.bon-top.cn/static_bc/images/certified.png"></image>
										</view>
										<view class="desc ml-20 te-wid">
											<view v-if="child.parent_id && child.p_info" class="ft1 ft-24 c-33 te-1">
												{{ child.user_info.nickname + " 回复：" + child.p_info.p_name }}
											</view>
											<view v-else class="ft1 ft-24 c-33 te-1">{{ child.user_info.nickname }}
												<text class="nameTitle" v-if="child.user_info?.sale_id > 0">认证老师</text>

											</view>
											<view class="ft mt-12 ft-20 c-99">{{
												child.ip_location + " | " + child.created_at
											}}</view>
										</view>
									</view>

									<view class="positionBox">
										<image @click="child.isMore = !child.isMore" style="
		              z-index: 1;
		              width: 74rpx;
		              height: 42rpx;
		              margin-bottom: 30rpx;
		            " src="https://cdn.oss.bon-top.cn/static_bc/images/more_p.png"></image>
										<view v-if="child.isMore" class="box pd-20">
											<view v-if="child.is_my === 0" class="ft c-33 flex-center"
												@click="goReport(child.id, 'reply_id')">举报
											</view>
											<view v-else class="ft c-33  flex-center"
												@click="isDelete(child.id, 'deleteReply', '确定要删除该条评论吗？')">
												删除</view>
										</view>
									</view>

								</view>
								<view class="ft mt-12 ml-102">{{
									child.name
								}}</view>
								<view class="combination flex ft ml-102">
									<!-- <view class="flex-center" @click="openInput(child.user_info.nickname, child.id)">
		              <image class="wh-24 mr-12" src="https://cdn.oss.bon-top.cn/static_bc/images/say.png"></image>
		              <view v-if="child.reply_list&&child.reply_list.length>0">
		                <text class="ft">{{child.reply_num  }}</text>
		              </view> 
		              <text class="ft">{{ child.reply_num }}</text>
		            </view>-->
									<!-- <view class="flex-center">
		              <image class="wh-24 mr-12"
		                src="https://cdn.oss.bon-top.cn/static_bc/images/say.png"></image>
		              <text class="ft">{{ child.reply_num }}</text>
		            </view>
		            <text>|</text> -->
									<view class="flex-center"
										@click="handleZan(child.id, child.is_like, 'reply_id', child)">
										<image v-if="child.is_like === 1" class="wh-24 mr-12"
											src="https://cdn.oss.bon-top.cn/static_bc/images/zan.png"></image>
										<image v-if="child.is_like === 0" class="wh-24 mr-12"
											src="https://cdn.oss.bon-top.cn/static_bc/images/noGood.png"></image>
										<text class="ft">{{ child.like_num }}</text>
									</view>
								</view>
								<view class="line mt-12 ml-102"></view>
							</view>

							<!-- test -->

							<!-- <view class="line mt-12 ml-102"></view> -->
							<view class="casess flex-center mt-20" @click="goReply(item.id)">
								<text class="ft c-bbq">{{ "更多回复" }}</text>
								<image class="wh-24 ml-12"
									src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png">
								</image>
							</view>
						</view>
						<view class="line mt-30" style="border-bottom: 2rpx solid #f1f1f1; width: 650rpx"></view>
					</view>
				</scroll-view>
			</view>


		</view>
		<view class="bottomCard">
			<view class="comments flex">
				<view class="btn auto ft c-ff flex-center ft-28" @click="showPop">{{ '我来回答' }}</view>
			</view>
		</view>
	</view>

	<!-- 回答 -->
	<comAnswerPop :show="show" @close="close" @onReplay="sbmitHF" :replysName="placeholder"></comAnswerPop>

	<!-- 删除提示 -->
	<up-modal width="518rpx" @confirm="confirm" @cancel="cancel" contentTextAlign="center" :show="showDel" :title="'提示'"
		:showCancelButton="true" :content="content"></up-modal>
	<!-- 举报 -->
	<comReportPopup :showReport="showReport" :reportId="reportId" :reportType="reportType" @closeReport="closeReport"
		v-if="showReport">
	</comReportPopup>
	<!-- <comAnswerPop :show="show" @close="close" @onReplay="sbmitHF"></comAnswerPop> -->

</template>

<script lang="js" setup>
import {
	ref,
	reactive
} from 'vue';
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";
import {
	onLoad,
	onShow
} from '@dcloudio/uni-app';
import comReportPopup from '@/components/comReportPopup.vue'
import comAnswerPop from "@/components/comAnswerPop.vue";

import navHead from '@/components/navHead.vue';
import TimeOut from '@/components/timeOut.vue';
const headData = reactive({
	color: '#fff',
	title: '问答详情'
})

const showPop = () => {
	if (!utils.isLogin()) return utils.showLogModel()
	show.value = !show.value
	placeholder.value = '请文明用语~'


}
const value2 = ref("")
// 创建响应式数据  
const show = ref(false);
const showDel = ref(false);
let flag = ref(true)
let placeholder = ref('请文明用语~')
const content = ref("确定要删除该条回答吗？");

let questionId = ref('')
let apiType = ref('answerQuestion')
let isFocus = ref(false)
const isMore = ref(false);
const deleteType = ref('')
const deleteId = ref('')
let showReport = ref(false)


const openPopup = () => {
	show.value = true;
	uni.showKeyboard({
		success: function () {
			console.log('Keyboard is shown');
		},
		fail: function (err) {
			console.error('Failed to show keyboard: ', err);
		}
	});
}
// 点击用户评论 对其进行回复
const openReply = (val = '', id = '') => {
	if (!utils.isLogin()) return utils.showLogModel()

	console.log('jjjjj')
	placeholder.value = '@' + val

	questionId.value = id
	apiType.value = 'commentReply'

	open()
}
// 定义方法  
function open() {
	// 打开逻辑，比如设置 show 为 true  
	show.value = true;

}

function close() {
	// 关闭逻辑，设置 show 为 false  
	show.value = false;
	value2.value = ''
	placeholder.value = '请文明用语~'
	apiType.value = 'answerQuestion'
}
let demoId = ref(null)

// 顶部举报open
const reportId = ref(null);
const reportType = ref('');
const goReport = (id, type) => {
	console.log('type', type)
	reportType.value = type
	reportId.value = id;
	showReport.value = true;
};
const closeReport = () => {
	showReport.value = false;
	isMore.value = false
	datas.value.forEach(item => {
		item.isMore = false
		item.reply_list.forEach(f => f.isMore = false)
	})
	console.log('jjjjjj')
}

// list 删除
const isDelete = (id, type = '', con) => {
	deleteId.value = id
	showDel.value = true
	deleteType.value = type
	content.value = con
}

//删除评论
const confirm = () => {
	// goBack()
	console.log('deleteType.value', deleteType.value)
	show.value = false;
	utils
		.request(
			api[deleteType.value], {
			id: deleteId.value
		},
			"post"
		)
		.then((res) => {
			cancel()
			if (deleteType.value == 'deleteQuestion') {
				uni.showToast({ title: "刪除成功!", icon: "none" })
				setTimeout(() => {
					goBack()
				}, 1000);
				return
			}
			getQuestionDetailFun()
		})
};
const cancel = () => {
	showDel.value = false;
	deleteType.value = ''
	content.value = '确定要删除该条评论吗？'
};

const flags = ref(true)
const zanCount = ref(0)
const zanTime = ref('')
const maxTime = ref(30)
// 点赞
const handleZan = (id, islike, key = '', item) => {
	let time = (parseInt(Date.now()) - parseInt(zanTime.value)) / 1000
	if (time < maxTime.value && zanCount.value > 10) {
		uni.showToast({ title: '操作过于频繁请稍后再试~', icon: 'none' })
		return flags.value = false
	} else if (time > maxTime.value) {
		zanTime.value = ''
		flags.value = true
		zanCount.value = 0
	}
	if (!flags.value) return
	flags.value = !flags.value
	zanCount.value++
	if (!zanTime.value) zanTime.value = Date.now()

	let _api = ['like', 'cancelLike']
	utils
		.request(
			api[_api[islike]], {
			[key]: id,
		},
			"post"
		)
		.then((res) => {
			// getQuestionDetailFun()
			flags.value = !flags.value
			if (_api[islike] == 'like') {
				item.is_like = 1
				item.like_num++
			} else {
				item.is_like = 0
				item.like_num--

			}
		})


}
const goPage = (url) => {
	uni.navigateTo({
		url: url
	})
}
const goReply = (id) => {
	uni.navigateTo({
		url: "/subpackage/componentsPage/comReply?id=" + id
	})
}
// 回复问题

// 回答问题
const sbmitHF = (val) => {
	console.log(flag)
	console.log(val)
	if (!flag.value) return
	flag.value = false
	let obj = {
		'answerQuestion': {
			question_id: demoId.value,
			content: val,
			app_id: utils.app_id,
			identity: utils.identity,
		},
		'commentReply': {
			answer_id: questionId.value,
			content: val,
			app_id: utils.app_id,
			identity: utils.identity,
		}

	}
	utils
		.request(
			api[apiType.value], obj[apiType.value], "post")
		.then((res) => {
			getAnswerListFun()
			console.log('answerQuestion', res)
			close()
			flag.value = true


			// datas.value = res.data.info
		})
}
let dataList = ref({})
const datas = ref({})
let detailInfo = ref({})
// 评论详情=>回答列表
const getAnswerListFun = () => {
	utils
		.request(
			api.getAnswerList, {
			question_id: demoId.value,
			app_id: utils.app_id,
			identity: utils.identity,
		},
			"get"
		)
		.then((res) => {
			console.log('getAnswerListFun', res)
			detailInfo.value = res.data || []
			datas.value = res.data.items
			if (datas.value.length)
				datas.value.forEach(item => {
					item.isMore = false
					item.showChild = false
					if (item.reply_list)
						item.reply_list.forEach(f => {
							f.isMore = false
							f.showChild = false
						})
				});
			// datas.value = res.data.info
		})
}
let details = ref({})
// 评论详情
const getQuestionDetailFun = () => {
	utils
		.request(
			api.getQuestionDetail, {
			id: demoId.value,
			app_id: utils.app_id,
			identity: utils.identity,
		},
			"get"
		)
		.then((res) => {
			console.log('hhhhhh', res)
			if (!res.data.info) {
				uni.showToast({
					title: '问题已不存在~',
					icon: 'none',
					mask: true
				})
				setTimeout(() => {
					goBack()
				}, 1500);
				return

			}

			console.log('斤斤计较')
			details.value = res.data?.info || {}

			getAnswerListFun()
		})
}
const goBack = () => {
	console.log('我返回了')
	uni.navigateBack(-1)
}
onShow(() => {
	getQuestionDetailFun()
})
onLoad((option) => {
	if (!Object.keys(option).length) return
	let _option = JSON.parse(option.data)

	demoId.value = _option.id
	// questionId.value = _option.id
	// getQuestionDetailFun()



	if (_option?.showPup) show.value = _option?.showPup
	console.log('_option', _option)
})
</script>


<style lang="scss" scoped>
.active {
	height: 540rpx !important;

}

.popup {
	height: 860rpx;
	background: #F8F8F8;
	border-radius: 40rpx 40rpx 0 0;

	//border: 2rpx solid red;
	.huifu {
		width: 128rpx;
		height: 58rpx;
		background: #333333;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.textBox {
		background: #FFFFFF;
		padding: 20rpx;
	}

	.close_black_img {
		width: 36rpx;
		height: 36rpx;
	}

	.btn_box {
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

	}
}


.card1 {
	width: 690rpx;
	height: 214rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.img {
		//border: 2rpx solid red;
		width: 142rpx;
		height: 174rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		flex-shrink: 0;
	}

	.btn {
		width: 170rpx;
		height: 54rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}

.card2 {
	width: 690rpx;
	height: 222rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.wenItem {
		width: calc(100% - 120rpx);
	}

	.wen {
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		background: #333333;
		border-radius: 50%;

	}

	.da {
		width: 40rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		background: #DBF046;
		border-radius: 50%;

	}
}

.bottomCard {
	position: fixed;
	z-index: 99;
	bottom: 0rpx;
	//   border: #dbf046 2rpx solid;
	width: 750rpx;
	height: 166rpx;
	background: #f8f8f8;
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.comments {
		width: 750rpx;
		height: 98rpx;
		background: #f8f8f8;
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

		.btn {
			width: 690rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

		}

	}
}

.caseBox {
	// width: 690rpx;
	// height: 1384rpx;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.identity {
		width: calc(100% - 130rpx);

		.nameTitle {
			display: inline-block;
			padding: 4rpx;
			background: #DBF046;
			border-radius: 8rpx;
			font-size: 20rpx;
			color: #333333;
			font-weight: 400;
			margin-left: 8rpx;

		}
	}

	.combination {
		// width: 172rpx;
		width: 260rpx;
		height: 54rpx;
		background: #ffffff;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
	}

	.line {
		width: 446rpx;
		height: 0rpx;
		border-bottom: 2rpx solid #f1f1f1;
	}

	.maxHeight {
		height: auto !important;
		padding: 20rpx;

	}


	.nextCase {
		width: 562rpx;
		// height: 0;
		padding: 20rpx;

		background: #ffffff;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		overflow: hidden;
		// transition: 0.4s;
		margin-left: 102rpx;
		margin-top: 12rpx;
		box-sizing: border-box;

		.casess {
			width: 160rpx;
			height: 54rpx;
			background: #f8f8f8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}
}

.positionBox {
	//border: #d51010 solid 2rpx;
	position: relative;
	right: 15rpx;

	.box {
		position: absolute;
		// bottom: -42rpx;
		left: -40rpx;
		z-index: 22;
		width: 128rpx;
		// height: 128rpx;
		background: #fff;
		box-shadow: 0rpx 0rpx 24rpx 2rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
}
</style>